Vue.component('father', {
  template: '#father',
  data() {
    return {
      father: 'data',
      beforeCreate: '',
      hide: false,
    };
  },
  beforeCreate() {
    /**
     * 实例已经初始化，只是数据观察与事件机制尚未形成，
     * 所以不能访问 data 数据、不能访问 dom
     * 所以这里适合做与组件无关的事情
     */

    console.log('======father-beforeCreate========');
    console.log(`访问具体 dom 节点：` + this.$refs.fatherRef); // undefined，无法获取具体dom节点
    console.log(`访问$data：${this.$data}`); // undefined
    console.log(`当前组件根节点：` + this.$el); // 当前组件根节点 undefined
    console.log(`访问data里的数据：` + this.father); // 无法访问到 data 里的数据
    console.log('======father-beforeCreate-end========');
    this.beforeCreate = 'yozhile'; // beforeCreate 中双向绑定还没起来
    console.log('                                    ');
  },
  created() {
    console.log('======father-created========');
    console.log(`访问具体dom节点：` + this.$refs.fatherRef); // undefined
    console.log('访问$data：' + JSON.stringify(this.$data)); // 可以访问到data
    console.log(this.$data); // 已经启用了双向绑定
    console.log('this.father：' + this.father); // data 可以访问到 father
    console.log(`this.$el:` + this.$el); // undefined 无法访问dom节点
    console.log(this.handleClick('created')); // 可以访问到method,也可以调用
    console.log('======father-created-end========');
    this.beforeCreate = 'created了'; // 已经可以双向绑定了
    console.log('                                    ');
  },
  beforeMount() {
    console.log('======father-beforeMount========\n');
    console.log(`访问dom节点` + this.$refs.fatherRef); // undefined,获取不到具体的dom节点
    console.log(this.$data); // 可以访问到data
    this.father = 'beforeMount fahter';
    console.log(`访问 this.father--：` + this.father); // 可以访问了，已经完成数据双向绑定
    console.log(`this.$el-：` + this.$el); // 可以访问到根节点
    // console.log(this);
    console.log(this.handleClick('beforeMount')); // 可以访问到method,也可以调用
    console.log('======father-beforeMount-end========\n');
    console.log('                                    ');
  },
  mounted() {
    console.log('======father-mounted========');
    console.log(`访问dom节点` + this.$refs.fatherRef); // undefined
    console.log(this.$data); // 可以访问到data
    this.father = 'mounted fahter';
    console.log(this.father); // undefined 因为还没有进行数据双向绑定
    console.log(`muonted this.$el--：${this.$el}`); // undefined
    console.log(this.handleClick('mounted')); // 可以访问到method,也可以调用
    console.log('======father-mounted-end========');
    console.log('                                    ');
  },
  updated() {
    console.log('更新了');
  },
  methods: {
    handleClick(name) {
      console.log(`我在${name}中访问`);
    },
  },
  beforeDestroy() {
    console.log('======beforeDestroy-start========\n');
    console.log(`访问dom节点` + this.$refs.fatherRef);
    console.log('======beforeDestroy-end========\n');
    console.log('                                    ');
  },
  destroyed() {
    console.log('======destroyed-start========\n');
    console.log(`访问dom节点` + this.$refs.fatherRef);
    console.log('======destroyed-end========\n');
  },
});

Vue.component('son', {
  template: '#son',
  props: ['colors'],
});
